<template lang="html">
  <div class="vip_page">
    <div class="vip_top">
      <div class="vip_info">
        <div class="vip_img">
          <img v-bind:src="user_info.user_avatar"/>
        </div>
        <div class="vip_user">
          <h3>{{user_info.user_nickname}}</h3>
          <div class="lev_icon"><img v-bind:src="user_info.icon"/></div>
        </div>
        <div class="date_vip">
          <div class="vip_btn" @click="invaleUser"></div>
          <!-- <div class="date_text">会员权益 {{user_info.rights_validity}} 到期 </div> -->
        </div>
        <div class="invite_icon" v-show="invite_icon_status" @click="getInviteIcon"></div>
      </div>
      <div class="account_panl">
        <div class="account">
          <h3>预计可返利(元) <span v-on:click.stop="openAccpountTips"></span></h3>
          <div class="account_total" @click="goAccount"> <h3>{{asset_info.amount}}</h3>
            <p>返利明细</p>
            <img src="../../../assets/image/member/double_arrow.png"/>
          </div>
          <div class="account_info">
            <!-- <div class="account_item">
              <h3>{{asset_info.day_amount}}</h3>
              <p>今日返利(元)</p>
            </div>
            <div class="account_hr"></div>
            <div class="account_item">
              <h3>{{asset_info.month_amount}}</h3>
              <p>近30天返利(元)</p>
            </div>
            <div class="account_hr"></div>
            <div class="account_item" v-on:click.stop="goReflect">
                <h3>{{asset_info.real_balance}}</h3>
                <p>余额(元) <span></span></p>
            </div> -->
            <p>已累计提现<span>{{asset_info.cash_amount}}</span></p>
          </div>
          <div class="account_withdraw">
            <p class="withdraw_total">可提现返利<span class="money">{{asset_info.real_balance}}</span></p>
            <span class="withdraw_btn" @click="goWithdrawBtn">申请提现</span>
          </div>
        </div>
      </div>
    </div>
    <div class="member_right" @click="goUrl">
      <div class="rights">
        <div class="rights_l">
          <img src="../../../assets/image/member/member_icon.png" alt="">
          <p>会员权益 {{user_info.rights_validity}} 到期 </p>
        </div>
        <div class="rights_r">
          <p>权益详情</p>
          <img src="../../../assets/image/member/right_arrow.png" alt="">
        </div>
      </div>
    </div>
    <Sales :profile_asset="profile_asset"></Sales>
    <div class="member_details">
      <div class="already_member" @click="goToVip">
        <div class="already_fans_top">
          <p>已邀会员</p>
          <img src="../../../assets/image/member/fans_arrow.png" alt="">
        </div>
        <div class="already_fans_bottom">
          <div class="">
            <h3>{{vip_nu}}</h3>
            <p>当前合计</p>
          </div>
          <div class="">
            <h3 class="today">{{vip_nu_new}}</h3>
            <p>今日新增</p>
          </div>
        </div>
      </div>
      <div class="already_fans" @click="goToFans">
        <div class="already_fans_top">
          <p>已邀粉丝</p>
          <img src="../../../assets/image/member/fans_arrow.png" alt="">
        </div>
        <div class="already_fans_bottom">
          <div class="">
            <h3>{{fans_nu}}</h3>
            <p>当前合计</p>
          </div>
          <div class="">
            <h3 class="today">{{fans_nu_new}}</h3>
            <p>今日新增</p>
          </div>
        </div>
      </div>
    </div>
    <div class="vip_ads">
      <Ad :height=270 position="ACCOUNT_BANNER"></Ad>
    </div>
    <div class="my_coupon" v-if="couponUserData.length !== 0">
      <div class="my_coupon_top">
        <p>我的优惠券</p>
        <div class="my_coupon_more" @click="goMyCouponMore">
          <p>查看更多</p>
          <img src="../../../assets/image/member/fans_arrow.png" alt="">
        </div>
      </div>
      <div class="my_coupon_bottom">
        <div class="my_coupon_content">
          <template v-for="(item, index) in couponUserData">
            <div class="coupon_card" :key="index">
              <div class="coupon_card_left">
                <p><span>￥</span>{{item.voucher_price}}</p>
                <span class="corner_marker">{{item.coupon_type_name}}</span>
              </div>
              <div class="coupon_card_right">
                <p>{{item.coupon_name}}</p>
                <p>{{item.voucher_subtotal}}</p>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="member_welfare">
      <div class="member_welfare_top">
        <p>会员专属福利</p>
        <div class="member_welfare_top_bg"></div>
      </div>
      <div class="member_welfare_bottom">
        <div :class="[ramdom ? 'member_product_ramdom' : '','member_product_content']">
          <template v-for="(item, index) in productRamdomData">
            <member-welfare-prd :key="index" :item="item"></member-welfare-prd>
          </template>
        </div>
        <div class="member_product_btn" @click="getProductRandomTwo">
          <p>{{captcha_button}}</p>
        </div>
      </div>
    </div>
    <!-- <div class="bank"></div> -->
    <!-- <Team :fans_nu="fans_nu" :vip_nu="vip_nu"></Team> -->
    <!-- <div class="bank"></div> -->
  </div>
</template>

<script>
import Tool from '@/utils/tool.js'
import Domain from '@/utils/domain.js'
import Sales from './component/sales.vue'
import MemberWelfarePrd from './component/member_welfare_prd.vue'
import Ad from '@/components/global/ad.vue'
export default {
  components: { Sales, MemberWelfarePrd, Ad },
  props: {
    asset_info: {
      type: Object
    },
    user_info: {
    },
    cash_amount: {
      type: Number,
      value: 0
    }
  },
  data () {
    return {
      active: 0,
      fans_nu: 0,
      fans_nu_new: 0,
      vip_nu: 0,
      vip_nu_new: 0,
      invite_icon_status: true,
      couponUserData: [],
      productRamdomData: [],
      productRamdomDataTwo: [],
      ramdom: false,
      time: 0,
      captcha_button: '再换一批',
      profile_asset: {
        sales_info: {
          sales_amount: { amount: 0, order_nu: 0 },
          sales_day_amount: { amount: 0, order_nu: 0 },
          sales_month_amount: { amount: 0, order_nu: 0 },
          sales_seven_day_amount: { amount: 0, order_nu: 0 }
        },
        sales_info_ok: {
          sales_amount: { amount: 0, order_nu: 0 },
          sales_day_amount: { amount: 0, order_nu: 0 },
          sales_month_amount: { amount: 0, order_nu: 0 },
          sales_seven_day_amount: { amount: 0, order_nu: 0 }
        }
      }
    }
  },
  created () {
    if (localStorage.getItem('invite_icon_status')) {
      this.invite_icon_status = false
    }
    this.getShopUserVouvher()
    this.getProductRandom()
    this.getProductRandomTwo()
    this.getSales()
  },
  mounted () {
    // 将backToday方法绑定到window下面，提供给外部调用
    window['getUpload'] = () => {
      this.getTeam()
      this.getShopUserVouvher()
      this.getSales()
    }
  },
  methods: {
    imgPath (src) {
      return Domain(src)
    },
    goUrl () {
      this.$router.push({ path: '/active/equity' })
    },
    goAccount () {
      this.$router.push({ path: '/merber/account_details' })
    },
    goReflect () {
      this.$router.push({ path: '/merber/reflect' })
    },
    goBussiness () {
      this.$router.push({ path: '/merber/business/index' })
    },
    goMyCouponMore () {
      window.location = 'yggcoupon://'
    },
    openAccpountTips () {
      this.$toast({
        duration: 5000,
        message: '已经支付，但处在未确认收货T+9之间的所有商品返利'
      })
    },
    getSales () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'profile_asset', method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.profile_asset = resp.data
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getMyInfo () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'my_info', method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            if (resp.data.is_pay_pwd === '0') {
              this.showTipsPass()
            }
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    showTipsPass () {
      var newtime = new Date()
      var tispdate = newtime.toLocaleDateString()
      this.$dialog.confirm({
        title: '您的账户余额可以提现啦～',
        message: '您还未设置提现支付密码噢',
        confirmButtonText: '去设置'
      }).then(() => {
        localStorage.setItem('tisp_date', tispdate)
        let isClient = Tool.isClient()
        if (isClient) {
          window.location.href = 'payorder://'
        } else {
          let isMini = sessionStorage.getItem('isMini')
          if (isMini) {
            window.wx.miniProgram.navigateTo({ url: '/pages/personal_center/setup/initial-password/initial-password' })
          }
        }
      }).catch(() => {
        localStorage.setItem('tisp_date', tispdate)
      })
    },
    getTeam () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'user_team', params: { type: 'number' }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.fans_nu = resp.data.fans_nu
            this.fans_nu_new = resp.data.fans_nu_new
            this.vip_nu = resp.data.vip_nu
            this.vip_nu_new = resp.data.vip_nu_new
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getShopUserVouvher () {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'coupon_voucher', params: { }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            this.couponUserData = resp.data.list
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getProductRandom (two) {
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'product', params: { type: 'recommend', random: 1, pagesize: 6 }, method: 'get' }).then((resp) => { // 请求成功
          if (resp.return_code === '0000') {
            if (two) {
              this.productRamdomDataTwo = resp.data.list
              setTimeout(() => {
                this.ramdom = false
              }, 1000)
            } else {
              this.productRamdomData = resp.data.list
            }
          }
          resolve(resp)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    },
    getProductRandomTwo () {
      if (this.captcha_button !== '再换一批') {
        return false
      }
      this.countDown()
      this.ramdom = true
      this.productRamdomData = this.productRamdomDataTwo
      this.getProductRandom('two')
    },
    invaleUser () {
      this.$router.push('/active/become_vip')
    },
    goWithdrawBtn () {
      this.$router.push('/merber/reflect')
    },
    goToFans () {
      this.$router.push('/merber/team?type=fans')
    },
    goToVip () {
      this.$router.push('/merber/team?type=vip')
    },
    getInviteIcon () {
      this.invite_icon_status = false
      localStorage.setItem('invite_icon_status', false)
    },
    countDown () {
      let time = this.time = 4
      var countTimer = null
      !countTimer && (countTimer = setInterval(() => {
        time -= 1
        this.time = time
        this.captcha_button = time + 's'
        if (time <= 0) {
          this.time = 0
          this.captcha_button = '再换一批'
          clearInterval(countTimer)
          countTimer = null
        }
      }, 1000))
    }
  }
}
</script>

<style lang="css" scoped>
</style>
